<!--
 * @Author: your name
 * @Date: 2021-10-19 15:16:12
 * @LastEditTime: 2021-10-22 09:58:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vuec:\Users\86131\Desktop\project\payforknowledge\src\views\Home\mine.vue
-->
<template>
  <div class="bg">
    <div class="touxiang">
      <!-- <van-image
        round
        height="100px"
        width="100px"
        src="../../assets/img/play-img/补充03-学习电子书02.png"
        v-if="show"
      /> -->
      <img
        src="../../assets/img/play-img/补充03-学习电子书02.png"
        v-if="show"
      />
      <van-image
        round
        width="100px"
        height="100px"
        src="https://img.yzcdn.cn/vant/cat.jpeg"
        v-else
      />
      <div>
        <p class="name">{{ name }}</p>
        <p class="qiandao">签到</p>
      </div>
      <div class="vip">VIP</div>
    </div>

    <div class="shoucang">
      <ul>
        <li>
          <p>10</p>
          <p>收藏</p>
        </li>
        <li>
          <p>10</p>
          <p>关注</p>
        </li>
        <li>
          <p>10</p>
          <p>粉丝</p>
        </li>
      </ul>
    </div>

    <div class="mine">
      <ul>
        <li><span>我的记录</span><span>更多</span></li>
        <li><span>我的笔记</span><span>更多</span></li>
        <li><span>我的记录</span><span>更多</span></li>
        <li><span>我的订单</span><span>更多</span></li>
        <li><span>设置</span><span>更多</span></li>
        <li><span>意见反馈</span><span>更多</span></li>
        <li><span>分享APP</span><span>更多</span></li>
      </ul>
    </div>
    <button @click="tuichu" v-if="show">退出登录</button>
    <button @click="denglu" v-else>登录</button>
  </div>
</template>

<script>
import { Image as VanImage } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    let token = ref(localStorage.getItem("token"));
    let name = ref("请先登录");
    let show = false;
    if (token.value) {
      name = ref(localStorage.getItem("username"));
      show = true;
    }
    const tuichu = () => {
      localStorage.clear();
      router.push("/");
    };
    const denglu = () => {
      localStorage.clear();
      router.push("/login");
    };
    return {
      tuichu,
      denglu,
      name,
      token,
      show,
    };
  },

  components: {
    VanImage: VanImage,
  },

  computed: {},

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.bg {
  background: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
}
.touxiang {
  margin: 20px;
  display: flex;
  align-items: center;
  .name {
    font-size: 20px;
    padding-left: 20px;
  }
  .qiandao {
    font-size: 16px;
    width: 190px;
    padding-left: 20px;
    margin-top: 15px;
  }
  .vip {
    font-size: 8px;
    color: white;
    border-radius: 12px;
    width: 50px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: #4ab8fa;
  }
}
.shoucang {
  ul {
    width: 95%;
    display: flex;
    font-size: 15px;
    justify-content: space-around;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    padding: 5px 0px;
    margin: auto;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #323232;
      p {
        margin: 2px;
        font-size: 16px;
        color: #959595;
      }
    }
  }
}
.mine {
  width: 95%;
  border-bottom: 1px solid #e1e1e1;
  padding: 15px 0;
  font-size: 14px;
  margin: auto;
  li {
    display: flex;
    justify-content: space-between;
    color: #323232;
    align-items: center;
    margin-top: 10px;
    span {
      margin: 1px;
      font-size: 16px;
      &:nth-child(2) {
        color: #767676;
      }
    }
  }
}
button {
  outline: none;
  border: none;
  width: 300px;
  height: 50px;
  background-color: #e3e3e3;
  border-radius: 25px;
  display: block;
  margin: 50px auto;
  font-size: 16px;
  color: #323232;
}
img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>
